<template>
	<div class="home">
		<Header title="订单"/>
		<div class="content">
			<van-tabs color="#ffc400">
				<van-tab 
					:title="item" 
					v-for="(item,index) in data.navData"
				>
					<div 
						v-for="(item,index) in store.state.orderListEnd" 
						v-if="item==='全部' && store.state.orderListEnd.length"
					>
						<van-card
							:num="item.num"
							:price="item.price"
							:title="item.title"
							:thumb="item.pic"
						/>
					</div>
					<div v-else>
						<Empty/>
					</div>
				</van-tab>
			</van-tabs>
		</div>
		<Footer/>
	</div>
</template>

<script setup>
	import { reactive } from 'vue';
	import Footer from '../../components/Footer.vue';
	import Header from '../../components/Header.vue';
	import Empty from '../../components/Empty.vue';
	import { useStore } from 'vuex';
	import { useRouter } from 'vue-router';
	
	const store = useStore()
	
	
	const data = reactive({
		navData: ['全部','交易完成','待支付','待发货','已发货']
	})
	
</script>

<style lang="less" scoped>
	.home {
		display: flex;
		flex-flow: column;
		height: 100%;
		.content {
			flex: 1;
			overflow-y: auto;
			justify-content: center;
			align-items: center;
		}
	}
</style>